<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>

    <cpn2></cpn2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    // 1.创建第一个组件构造器（子组件）
    const cpn1 = Vue.extend({
        template: `
            <div>
                <h2>子组件</h2>
            </div>
        `
    })

    // 2.创建第二个组件构造器（父组件）
    const cpn2 = Vue.extend({
        template: `
          <div>
              <h2>父组件</h2>
              <cpn1></cpn1>
          </div>
        `,
        components: {
            'cpn1': cpn1
        }
    })

    // root
    const app = new Vue({
        el: '#app',
        data: {
            message: 'simplelu'
        },
        components: {
            'cpn2': cpn2
        }
    })
</script>
</body>
</html>